<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>

            <el-form-item label="内容" class="content">
                <VueEditor v-model="form.content" :editorToolbar="customBar" />
            </el-form-item>

            <el-form-item label="分类">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox
                        v-for="item in categoryList"
                        :key="item.id"
                        :label="item.id"
                        >{{ item.name }}</el-checkbox
                    >
                </el-checkbox-group></el-form-item
            >

            <el-form-item label="封面">
                <el-upload
                    :file-list="form.cover"
                    :action="$axios.defaults.baseURL + '/upload'"
                    :headers="{
                        Authorization: token,
                    }"
                    :on-success="coverSuccess"
                    :on-remove="coverRemove"
                    list-type="picture-card"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="类型">
                <el-radio-group v-model="form.type">
                    <el-radio :label="1">文章</el-radio>
                    <el-radio :label="2">视频</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { VueEditor } from "vue2-editor";
    export default {
        components: {
            VueEditor,
        },
        created() {
            this.$axios({
                url: "/category",
            }).then((res) => {
                res.data.data.splice(0, 2);
                this.categoryList = res.data.data;
            });

            if (this.$route.query.id) {
                this.$axios({
                    url: "/post/" + this.$route.query.id,
                }).then((res) => {
                    // 处理富文本框无法接受 div 的问题
                    res.data.data.content = res.data.data.content.replace(
                        /div/g,
                        "p"
                    );
                    // 处理分类选项多选框需要的数字数组
                    // [{id: 666}] => [666]
                    this.checkList = res.data.data.categories.map((item) => {
                        return item.id;
                    });

                    // 处理封面图片的数据
                    res.data.data.cover.map((img) => {
                        // 解决了url 不全的问题
                        if (img.url.indexOf("http") == -1) {
                            img.url = this.$axios.defaults.baseURL + img.url;
                        }
                        // 解决 uid 相同的问题
                        // 通过观察数据发现 id 是独一无二
                        // 反而 uid 作为用来渲染的 key 每个都是1
                        img.uid = img.id;

                        return img;
                    });

                    console.log(res.data.data.content);
                    this.form = res.data.data;
                });
            }
        },
        watch: {
            checkList() {
                this.form.categories = this.checkList.map((num) => {
                    return {
                        id: num,
                    };
                });
            },
        },
        data() {
            return {
                // 存放所有分类的数组
                categoryList: [],
                // 组件要求的数字组成的数组
                checkList: [],

                token: localStorage.getItem("token"),
                content: "",
                customBar: [
                    ["bold", "italic", "underline"],
                    [{ list: "ordered" }, { list: "bullet" }],
                    ["image", "code-block"],
                ],
                form: {
                    title: "",
                    content: "",
                    categories: [],
                    cover: [],
                    type: 1,
                },
            };
        },
        methods: {
            coverSuccess(res, file, fileList) {
                // console.log("上传成功");
                // 这里应该将当前的封面放入 form 当中
                // 接口要求的是 [{id:xxx}]
                // 当前上传的图片 id 在 res.data.id 里面
                // console.log(res.data.id);
                // this.form.cover.push({
                //     id,
                // });
                // 现在这里的成功上传推送进 form.cover 的数据不仅仅
                // 用来发送 api 请求, 也会用来渲染上传组件, 单单一个 id 就不够
                // 还要有这个 file 用来显示
                // console.log(file);
                file.id = res.data.id;
                //    this.form.cover.push(file);
                this.form.cover.push(file);
            },
            coverRemove(file, fileList) {
                // 这是删除图片后的回调, 
                // 第二个参数可以接受到删除后的文件列表
                // 直接赋值给用作文件列表的 this.form.cover 即可
                this.form.cover = fileList
                console.log("删除成功");
            },
            onSubmit() {
                console.log(this.form);
                this.$axios({
                    method: "post",
                    url: "/post",
                    data: this.form,
                }).then((res) => {
                    console.log(res.data);
                    // 发布成功后跳转会文章列表页
                    this.$router.push("/postlist");
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .content {
        /deep/ .el-form-item__content {
            line-height: 1;
        }
    }
</style>